<template>
  <div ref="table" class="table">
    <ul class="table_cell table_title">
      <li class="table_item" v-for="title in titles">{{title.value}}</li>
    </ul>
    <ul>
      <li class="table_cell" v-for="list in dataSource">
        <p class="table_item" v-for="item in itemNumber">{{list[item.key]}}</p>
        <button v-if="btn" class="table_item btn" @click="btnClick(list.childid)">{{btn}}</button>
      </li>
    </ul>
    <div class="table_btn">
      <button @click="previous" :disabled="previousEnable">上一页</button>
      <button @click="next" :disabled="nextEnable">下一页</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      currentPage: 1
    };
  },
  props: ["titles", "dataSource", "maxPage", "btn"],
  created() {},
  updated() {
    if (!this.dataSource) {
      return;
    }
    if (this.dataSource.length) {
      this.$refs.table.style.display = "block";
    }
  },
  computed: {
    previousEnable() {
      if (this.currentPage <= 1) {
        return true;
      }
      return false;
    },
    nextEnable() {
      if (this.maxPage == this.currentPage) {
        return true;
      }
      return false;
    },
    itemNumber() {
      if (this.btn) {
        var newArr = this.titles.concat();
        newArr.pop();
        return newArr;
      }
      return this.titles;
    }
  },
  methods: {
    previous() {
      this.currentPage -= 1;
      this.$emit("previous", this.currentPage);
    },
    next() {
      this.currentPage += 1;
      this.$emit("next", this.currentPage);
    },
    btnClick(data) {
      this.$emit("btnClick", data);
    }
  }
};
</script>

<style scoped>
.table {
  background-color: #fff;
  display: none;
}
.table_cell {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-bottom: 0.01rem solid #d9d9d9;
  color: #555555;
  font-size: 0.3rem;
  height: 0.85rem;
}
.table_item {
  flex-basis: 0;
  flex-grow: 1;
  text-align: center;
}
.table_title {
  border-top: 0.01rem solid #d9d9d9;
  color: #000;
}
.table_btn {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem;
}
.table_btn button {
  color: #0085e7;
  font-size: 0.32rem;
}
.table_btn button:disabled {
  opacity: 0.75;
}
.btn {
  background-color: var(--btn-color);
  border-radius: 0.1rem;
  color: #fff;
  font-size: 0.3rem;
  padding: 0.1rem 0;
}
</style>

